<template>
	<view class="page" style="padding-bottom: 20rpx;">
		<topVue title="兑换记录"></topVue>
		<view class="item margin20 padding20 flex align-center" v-for="(item, index) in list" :key="index">
			<view class="icon relative">
				<image src="../../static/person/time.png" class="absolute-auto" style="width: 42rpx; height: 42rpx;"></image>
			</view>
			<view class="flex-1 flex-column flex-between" style="height: 78rpx; padding-left: 20rpx;"> 
				<view class="flex-between">
					<text style="font-weight: 600; color: #4B5563; line-height: 1;">{{item.redemptionType}}</text>
					<text style="font-weight: 600; color: #4B5563; line-height: 1;">{{item.numberOfPoints/100}}积分</text>
				</view>
				<view class="flex-between">
					<text style="fcolor: #999; line-height: 1;">{{item.createTime | formatTime("YMDHMS")}}</text>
					<text style="font-weight: 600; line-height: 1;" :style="{color:item.reviewStatus=='审核中'?'#4B5563':(item.reviewStatus=='已通过'?'#1CC289':'#EF4444')}" >{{item.reviewStatus}}</text>
				</view>
			</view>
		</view>
		
		<empty text="记录列表为空" v-if="isEmpty"></empty>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		data(){
			return {
				isEmpty: false,
				pageNum: 1,
				pageSize: 20,
				pages: 0,
				list: []
			}
		},
		
		computed: {
			...mapState({
				user: state => state.user,
				balanceInfo: state => state.balanceInfo
			})
		},
		
		async mounted() {
			this.list = []
			await this.getList()
		},
		
		async onReachBottom() {
			if(this.pageNum===this.pages) return
			this.pageNum++
			await this.getList()
		},
		
		methods: {
			async getList(){
				const result = await this.$request("/app-api/pay/wallet/getARedemptionHistory", "GET", {
					userId: this.user.id,
					pageSize: this.pageSize,
					pageNo: this.pageNum
				})
				if(result.code===0) {
					console.log(result.data.list)
					this.list = this.list.concat(result.data.list)
					this.pages = Math.ceil(result.data.total/this.pageSize)
					this.isEmpty = this.list.length===0
					console.log("总页数", this.pages)
					console.log("兑换记录列表", this.list)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.item {
		width: 690rpx;
		background: #fff;
		border-radius: 12rpx;
		box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		.icon {
			width: 88rpx;
			height: 88rpx;
			border-radius: 50%;
			background: #F3F4F6;
		}
	}
	
</style>